<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="admin注册">
    <script type="text/javascript" src="static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/res/layui/css/layui.css">
    <link rel="stylesheet" href="static/res/css/global.css">
</head>
<body>
<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="/">
            <img src="static/res/images/logo.png" alt="layui">
        </a>
    </div>
</div>

<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user" style="text-align: center">
            <ul class="layui-tab-title" style="width: 200px;margin: 0 auto">
                <li><a href="index.jsp">登入</a></li>
                <li class="layui-this">注册</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0; width: 309px;margin: 0 auto">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form method="post">
                            <div class="layui-form-item">
                                <label for="L_loginname" class="layui-form-label">登录名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_loginname" name="L_loginname" required autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"> &nbsp&nbsp&nbsp&nbsp将会成为您唯一的登入名
                                    <span id="loginNameNull" style="color: red; margin-left:5px; float:left;"></span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="L_username" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <span id="userNameNull" style="color: red; margin-left:5px; float:left;"></span>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_pass" name="L_pass" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">&nbsp&nbsp&nbsp&nbsp6到16个字符
                                    <span id="passWordNull" style="color: red; margin-left:5px; float:left;"></span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_repass" class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_repass" name="repass" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <span id="rePassNull" style="color: red; margin-left:5px; float:left;"></span>
                            </div>

                            <div class="layui-form-item">
                                <label for="L_email" class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="email" id="L_email" name="email" required lay-verify="email"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <span id="emailNull" style="color: red; margin-left:5px; float:left;"></span>
                            </div>


                            <div class="layui-form-item">
                                <label for="L_phone" class="layui-form-label">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_phone" name="L_username" required lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <span id="phoneNull" style="color: red; margin-left:5px; float:left;"></span>
                            </div>

                            <div class="layui-form-item">
                                <label for="L_PhoneVercode" class="layui-form-label">手机验证码</label>
                                <div class="layui-input-inline" style="float: left;width: 85px">
                                    <input type="text" id="L_PhoneVercode" name="L_PhoneVercode" required
                                           lay-verify="required" placeholder="短信验证码" autocomplete="off"
                                           class="layui-input" style="width: 90px">
                                    <span id="phoneVercodeNull" style="color: red; margin-left:5px; float:left;"></span>
                                </div>
                                <div>
                                    <input style="width: 95px;height: 37px" id="btn-getPhone" onclick="getPhoneSms()"
                                           value="获取验证码" type="button">
                                </div>
                            </div>

                            <span id="showTrue" style="color: red; margin-left:5px; float:left;"></span>

                            <div class="layui-form-item" style="text-align: center">
                                <button style="margin: 0 auto" class="layui-btn" lay-filter="*" lay-submit onclick="register();return false">
                                    立即注册
                                </button>
                            </div>
                            <div class="layui-form-item fly-form-app">
                                <span>或者直接使用社交账号快捷注册</span>
                                <a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                                   class="iconfont icon-qq" title="QQ登入"></a>
                                <a href="" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                                   class="iconfont icon-weibo" title="微博登入"></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fly-footer">
        <p><a href="http://fly.layui.com/" target="_blank">INCO系统</a> 2017 &copy; <a target="_blank">inco.com 出品</a></p>
        <p>
            <a href="http://fly.layui.com/jie/3147/" target="_blank">联系我们</a>
            <a href="http://www.layui.com/template/fly/" target="_blank">获取帮助</a>
            <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
        </p>
    </div>

</div>


<script src="static/res/layui/layui.js"></script>
<!-- 触发JS刷新-->
<script type="text/javascript">
    <%--检测密码格式--%>
    $('#L_pass').blur(function loginName() {
            if ($("#L_pass").val().length < 6 || $("#L_pass").val().length > 16) {
                $('#passWordNull').text("密码格式不正确");
                return false;
            }
            if ($("#L_pass").val().length > 5 && $("#L_pass").val().length < 17) {
                $('#passWordNull').text("");
                return false;
            }
        }
    );
    <%--检测密码是否一致--%>
    $('#L_repass').blur(function loginName() {

            if ($("#L_repass").val() != $("#L_pass").val()) {
                $('#rePassNull').text("与原密码不一致");
                return false;
            }
            if ($("#L_repass").val() == $("#L_pass").val()) {
                $('#rePassNull').text("");
                return false;
            }
        }
    );


    <%--登录名验证是否有人使用方法--%>
    $('#L_loginname').blur(function loginName() {
            var L_loginname = $("#L_loginname").val();
            if ($("#L_loginname").val() == "") {

                $('#loginNameNull').text("");
                return false;

            }
            $.ajax({
                url: "/userAdmin/checkloginName",
                type: "post",
                dataType: "json",
                data: {
                    "L_loginname": L_loginname,
                },
                success: function (data) {
                    var dataType = data.msg;
                    if (dataType == "该登录名已被注册") {
                        $('#loginNameNull').text("该登录名已被注册");
                    } else if (dataType == "该登录名可以使用") {
                        $('#loginNameNull').text("该登录名可以使用");
                    } else {
                        $('#loginNameNull').text("系统出错，请稍后再试");

                    }
                }
            });

        }
    );

    <%--获取手机验证码--%>
    var dataPhone;
    function getPhoneSms() {
        var phone = document.getElementById("L_phone").value;
        $.ajax({
            url: "/userAdmin/checkPhone",
            type: "post",
            dataType: "json",
            data: {
                "phone": phone
            },
            success: function (data) {
                if (data.msg == "该手机号已被注册") {
                    alert(data.msg);

                }else if (data.msg=="验证码已发送"){
                    //发送成功后开始倒计时
                    var timer = null;
                    var sec = 60;
                    $('#btn-getPhone').attr('disabled', 'disabled');
                    timer = setInterval(function () {
                        sec--;
                        $('#btn-getPhone').val(+sec + 's后重发送');
                        if (sec == 0) {
                            clearInterval(timer);
                            $('#btn-getPhone').val('重新发送');
                            $('#btn-getPhone').removeAttr('disabled');
                        }
                    }, 1000);
                }

            }
        });

    }

    //手机号不能为空


    function getPhone() {
        if ($("#L_PhoneVercode").val() == "") {
            alert("手机号不能为空");
            $("#L_PhoneVercode").focus();
            return false;

        }
        if (!$("#L_PhoneVercode").val() == "") {
            REGISTER.beforeSubmit();

        }
    }

    //验证码验证方法
    $('#L_PhoneVercode').blur(function yanzhengma() {
            var L_PhoneVercode = $("#L_PhoneVercode").val();
            if (L_PhoneVercode == "") {
                $('#showTrue').text("");
                return false
            }
            $.ajax({
                url: "/userAdmin/smsVerifyJudge",
                type: "post",
                dataType: "json",
                data: {
                    "L_PhoneVercode": L_PhoneVercode,
                },
                success: function (data) {
                    var dataType = data;
                    if (dataType == 1) {
                        $('#showTrue').text("验证码正确");
                    } else if (dataType == 0) {
                        $('#showTrue').text("验证码错误");
                    } else {
                        $('#showTrue').text("系统出错，请稍后再试");

                    }
                }
            });

        }
    );

    //注册方法
    function register() {

        if ($("#L_loginname").val() == "") {
            $('#loginNameNull').text("登录名不能为空");
            $("#L_loginname").focus();
            return false;
        }
        if ($("#L_username").val() == "") {
            $('#userNameNull').text("用户昵称不能为空");
            $("#L_username").focus();
            return false;
        }
        if ($("#L_pass").val() == "") {
            $('#passWordNull').text("密码不能为空");
            $("#L_pass").focus();
            return false;
        }
        if ($("#L_repass").val() == "") {
            $('#rePassNull').text("请再次输入密码");
            $("#L_repass").focus();
            return false;
        }
        if ($("#L_email").val() == "") {
            $('#emailNull').text("邮箱不能为空");
            $("#L_email").focus();
            return false;
        }

        if ($("#L_phone").val() == "") {
            $('#phoneNull').text("手机号不能为空");
            $("#L_phone").focus();
            return false;
        }
        if ($("#L_PhoneVercode").val() == "") {
            $('#phoneVercodeNull').text("验证码不能为空");
            $("#L_PhoneVercode").focus();
            return false;
        }
        //获取用户名密码 验证码
        var L_loginname = document.getElementById("L_loginname").value;
        var L_username = document.getElementById("L_username").value;
        var L_pass = document.getElementById("L_pass").value;
        var L_repass = document.getElementById("L_repass").value;
        var L_email = document.getElementById("L_email").value;
        var L_phone = document.getElementById("L_phone").value;

        $.ajax({
            url: "/userAdmin/adminUserRegister",
            type: "post",
            datatype: "json",
            data: {
                'L_loginname': L_loginname,
                'L_username': L_username,
                'L_pass': L_pass,
                'L_repass': L_repass,
                'L_email': L_email,
                'L_phone': L_phone
            },
            success: function (data) {
                if (data.msg == "注册成功") {
                    alert(data.msg);
                    window.location.href = "/index.jsp";
                } else {
                    alert(data.msg);
                }
            }
        })
    };

</script>

</body>
</html>